<template>
  <div class="content">
    <el-row class="bgW">
      <el-col :span="22">
        <el-form class="search" :inline="true" size="mini" :model="search">
          <el-form-item label="日期：">
            <el-date-picker
              v-model="search.start"
              type="date"
              class="w130"
              placeholder="开始日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <el-date-picker
              v-model="search.end"
              type="date"
              class="w130"
              placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList('search')">搜索</el-button>
      </el-col>
    </el-row>
      <el-row>
        <el-col :span="24">
          <el-table
            :data="list"
            size="small"
            border
            :cell-style="$style.cellStyle"
            :header-cell-style="$style.rowClass"
          >
            <ElTableColumn label="客户名称" prop="customer_name" />
            <ElTableColumn label="手机号" prop="telephone" />
            <ElTableColumn label="积分变动">
             <template slot-scope="{row}">
                {{ row.symbol == 1 ?'+':'-' }}{{row.now_amount }}
              </template>
            </ElTableColumn> 
            <ElTableColumn label="积分类型">
              <template slot-scope="{row}">
                {{ row.notes_name || row.remarks }}
              </template>
            </ElTableColumn> 
            <ElTableColumn label="门店名称" prop="shop_name" />
            <ElTableColumn label="时间" prop="create_time" />
          </el-table>
          <pagination
            class="page tc mt10"
            :total="page.total"
            :page.sync="page.page"
            :limit.sync="page.pagesize"
            @pagination="getList"
          />
        </el-col>
      </el-row>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import pagination from "@/components/Pagination";
import {
  accountLogList
} from "@/api/client";
class Search {
  start = "";
  end = "";
}
class Page {
  total = 0;
  page = 1;
  pagesize = 10;
}
export default {
  name: "ClientList",
  components: {
    pagination
  },
  props: {
    clienId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      page: new Page(),
      search: new Search(),
      list: [],
      customer_id:'',
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  mounted() {
    this.customer_id = this.clienId ? this.clienId : "";
    this.getList();
  },
  methods: {
    getList(option) {
      if (option === "search") this.page = new Page();
      accountLogList({
        ...this.page,
        ...this.search,
        type:'1',
        customer_id: this.clienId,
      }).then(res => {
        this.list = res.data.data;
        this.clientLoading = false;
        this.page.total = res.data.total;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
